<style>
    #service-info-update {
        padding: 20px 25px 25px 0;
        margin: 0 0 2px 3px !important;
    }
</style>
<input hidden id="serviceInfo" data-th-value="${serviceInfo}">
<div class="layui-fluid" id="service-info-update">
    <form class="layui-form" action="" lay-filter="service-info-update-form" onsubmit="return false">
        <div class="layui-form-item">
            <div class="layui-form-item febs-hide">
                <label class="layui-form-label febs-form-item-require">服务id：</label>
                <div class="layui-input-block">
                    <input type="text" name="serviceId" data-th-value="${serviceInfo.serviceId}">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">系统名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="spName" lay-verify="required|spName" autocomplete="off" placeholder="英文"
                           class="layui-input" data-th-value="${serviceInfo.spName}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">系统简称</label>
                <div class="layui-input-inline">
                    <input type="text" name="spAlias" lay-verify="spNameShort" autocomplete="off" placeholder="中英都行"
                           class="layui-input" data-th-value="${serviceInfo.spAlias}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">服务名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required|name" autocomplete="off" placeholder="英文"
                           class="layui-input" data-th-value="${serviceInfo.name}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">服务简称</label>
                <div class="layui-input-inline">
                    <input type="text" name="alias" lay-verify="alias" autocomplete="off"
                           placeholder="中英都行"
                           class="layui-input"  data-th-value="${serviceInfo.alias}">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">服务版本</label>
                <div class="layui-input-inline">
                    <input type="text" name="version" lay-verify="required|version" autocomplete="off" placeholder="版本号"
                           class="layui-input"  data-th-value="${serviceInfo.version}">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">负责人</label>
                <div class="layui-input-inline">
                    <input type="text" name="principal" lay-verify="required|principal" autocomplete="off"
                           placeholder=""
                           class="layui-input principal"  data-th-value="${serviceInfo.principal}">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务协议</label>
                <div class="layui-input-block">
                    <input type="radio" lay-filter="protocol" name="protocol" value="HTTP" title="HTTP"   th:checked="${serviceInfo.protocol == 'HTTP'}">
                    <input type="radio" lay-filter="protocol" name="protocol" value="WebService" title="WebService"  th:checked="${serviceInfo.protocol == 'WebService'}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">服务标准</label>
                <div class="layui-input-block">
                    <input type="radio" name="standard" value="JSON" title="JSON" th:checked="${serviceInfo.standard == 'JSON'}">
                    <input type="radio" name="standard" value="XML" title="XML" th:checked="${serviceInfo.standard == 'XML'}">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">服务描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" lay-verify="description" autocomplete="off" placeholder="api描述"
                       class="layui-input"   data-th-value="${serviceInfo.description}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">业务地址</label>
            <div class="layui-input-block">
                <input type="text" name="businessPath" lay-verify="required|businessPath" autocomplete="off"
                       placeholder="api BaseUrl"
                       class="layui-input"  data-th-value="${serviceInfo.businessPath}">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label febs-form-item-require">接口名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="interfaceName" lay-verify="required|interfaceName" autocomplete="off"
                           placeholder="method"
                           class="layui-input"  data-th-value="${serviceInfo.interfaceName}">
                </div>
            </div>

            <!--<div class="layui-inline" style="display: none;">-->
            <div class="layui-inline namespace-box">
                <label class="layui-form-label">NameSpace</label>
                <div class="layui-input-inline">
                    <input type="text" name="namespace" autocomplete="off" placeholder="命名空间"
                           class="layui-input"  data-th-value="${serviceInfo.namespace}">
                </div>
            </div>

            <div class="layui-inline req-method-box">
                <label class="layui-form-label">请求方式</label>
                <div class="layui-input-block">
                    <select name="method" lay-filter="aihao">
                        <option value="GET" th:selected="${serviceInfo.method == 'GET'}">GET</option>
                        <option value="POST" th:selected="${serviceInfo.method == 'POST'}">POST</option>
                        <option value="PUT" disabled>PUT</option>
                        <option value="DELETE" disabled>DELETE</option>
                    </select>
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">请求参数</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="params" name="params"
                       placeholder="request param"
                       class="layui-input parameter" data-th-value="${serviceInfo.params}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">ESB地址</label>
            <div class="layui-input-block">
                <input type="text" name="bindEsbPath" lay-verify="bindEsbPath" autocomplete="off" placeholder="ESB地址"
                       class="layui-input"  data-th-value="${serviceInfo.bindEsbPath}">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">服务类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="0" title="原子" th:checked="${serviceInfo.type == 0}">
                    <input type="radio" name="type" value="1" title="组合" th:checked="${serviceInfo.type == 1}">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">服务状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="0" title="注册" th:checked="${serviceInfo.status == '0'}">
                    <input type="radio" name="status" value="1" title="审核" th:checked="${serviceInfo.status == '1'}">
                    <input type="radio" name="status" value="2" title="可用" th:checked="${serviceInfo.status == '2'}">
                    <input type="radio" name="status" value="3" title="禁用" th:checked="${serviceInfo.status == '3'}">
                </div>
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="service-info-update-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script>
    //  https://www.open-open.com/code/view/1430625516632
    layui.use(['febs', 'form'], function () {
        var $ = layui.$,
            febs = layui.febs,
            form = layui.form
            ,
            serviceInfo = $('#serviceInfo').val();
        ;
        form.render();

        $('.namespace-box').hide();
//        $('.principal').val(currentUser.username);


        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            name: [/^\w+$/, '数字字母下划线组成'],
            spName: [/^\w+$/, '数字字母下划线组成'],
            businessPath: [/^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, '地址格式有误'],
//            esbPath: [/^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, '地址格式有误'],
        });


        $('.parameter').focus(function () {
            var ts = $(this);
            var message = ts.val();
            message = (message == '') ? '[]' : message;
            console.log(message);
            var params = JSON.parse(message);
            console.log(params)
            febs.modal.view('添加参数', 'serviceInfo/addParameter', {
                data: {
                    paramJson: message
                },
                btn: ['添加', '删除', '确认'],
                btn1: function (index, layero) {
                    var par_txt = $(layero).find(".parameter-text"),
                        name = $(layero).find("input[name]"),
                        type = $(layero).find(".parameter-select option:selected").val();
                    if (name.val() == '') {
                        layer.tips('参数不能为空', name);
                        return false;
                    }
                    params.push({name: name.val(), type: type});
                    var str = JSON.stringify(params);
                    par_txt.val(str);
                    ts.val(str);
                    $(name).val("");
                    return false;
                },
                btn2: function (index, layero) {
                    if (params.length > 0) {
                        params.pop();
                        var str = JSON.stringify(params);
                        $(layero).find(".parameter-text").val(str);
                        ts.val(str);
                    }
                    return false;
                },
                success: function (intdex, layero) {
                    return false;
                }
            });
        });

        form.on('radio(protocol)', function (data) {
            if (data.value == 'HTTP') {//
                $('.req-method-box').show();
                $('.namespace-box').hide();
            } else if (data.value == 'WebService') {  //
                $('.req-method-box').hide();
                $('.namespace-box').show();
            }
        });

        /* 监听提交 */
        form.on('submit(service-info-update-form-submit)', function (data) {
//            layer.alert(JSON.stringify(data.field), {
//                title: '最终的提交信息'
//            });
            console.log("  post  update ")
//            console.log(data)
            console.log(data.field)

            if (febs.nativeEqual(data.field, serviceInfo)) {
                febs.alert.warn('数据未作任何修改！');
                return false;
            }
            febs.post(ctx + 'serviceInfo/update', data.field, function () {
                layer.closeAll();
                febs.alert.success('更新成功');
                $('#febs-service-info').find('#query').click();
                return false;
            });
            return false;
        });
    });
</script>